<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查询设置</title>
  <link rel="stylesheet" href="/public/lib/element-ui/index.css">
  <script src="/public/lib/vue.js"></script>
  <script src="/public/lib/element-ui/index.js"></script>
  <script src="/public/lib/axios.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: #f5f5f5;
    }
    .settings-container {
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    .settings-card {
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 30px;
    }
    .settings-header {
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 20px;
      margin-bottom: 30px;
    }
    .settings-header h3 {
      margin: 0;
      color: #303133;
    }
    .settings-form {
      max-width: 500px;
    }
    .current-settings {
      margin-top: 30px;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: 4px;
      border-left: 4px solid #409EFF;
    }
    .settings-info {
      margin-bottom: 10px;
    }
    .settings-label {
      font-weight: bold;
      color: #606266;
    }
    .settings-value {
      color: #303133;
      margin-left: 10px;
    }
    .no-settings {
      text-align: center;
      padding: 30px;
      color: #909399;
    }
    .time-picker {
      width: 100%;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="settings-container">
    <div class="settings-card">
      <div class="settings-header">
        <h3>成绩查询设置</h3>
        <p style="color: #909399; margin-top: 10px;">设置学生可以查询成绩的时间段，学生只能在此时间段内查看成绩</p>
      </div>

      <!-- 设置表单 -->
      <div class="settings-form">
        <el-form :model="settingsForm" :rules="rules" ref="settingsForm" label-width="120px">
          <el-form-item label="查询开始时间" prop="start_time">
            <el-date-picker
                    v-model="settingsForm.start_time"
                    type="datetime"
                    placeholder="选择开始日期和时间"
                    class="time-picker"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm"
                    format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="查询结束时间" prop="end_time">
            <el-date-picker
                    v-model="settingsForm.end_time"
                    type="datetime"
                    placeholder="选择结束日期和时间"
                    class="time-picker"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm"
                    format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSettings">保存设置</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 当前设置显示 -->
      <div class="current-settings" v-if="currentSettings">
        <h4>当前生效的设置</h4>
        <div class="settings-info">
          <span class="settings-label">查询开始时间:</span>
          <span class="settings-value">{{ formatDateTime(currentSettings.start_time) }}</span>
        </div>
        <div class="settings-info">
          <span class="settings-label">查询结束时间:</span>
          <span class="settings-value">{{ formatDateTime(currentSettings.end_time) }}</span>
        </div>
        <div class="settings-info">
          <span class="settings-label">设置人:</span>
          <span class="settings-value">{{ currentSettings.creator_name }}</span>
        </div>
        <div class="settings-info">
          <span class="settings-label">设置时间:</span>
          <span class="settings-value">{{ formatDateTime(currentSettings.update_time) }}</span>
        </div>
      </div>

      <!-- 无设置状态 -->
      <div v-else class="no-settings">
        <i class="el-icon-info" style="font-size: 48px; margin-bottom: 20px;"></i>
        <p>尚未设置查询时间段</p>
        <p style="font-size: 14px;">请在上方表单中设置查询时间段</p>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        settingsForm: {
          start_time: '',
          end_time: ''
        },
        currentSettings: null,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7; // 不能选择今天之前的日期
          }
        },
        rules: {
          start_time: [
            { required: true, message: '请选择查询开始时间', trigger: 'change' }
          ],
          end_time: [
            { required: true, message: '请选择查询结束时间', trigger: 'change' },
            {
              validator: (rule, value, callback) => {
                if (!value || !this.settingsForm.start_time) {
                  callback();
                  return;
                }

                const startTime = new Date(this.settingsForm.start_time);
                const endTime = new Date(value);

                if (endTime <= startTime) {
                  callback(new Error('结束时间必须晚于开始时间'));
                } else {
                  callback();
                }
              },
              trigger: 'change'
            }
          ]
        }
      };
    },
    mounted() {
      this.getCurrentSettings();
    },
    methods: {
      getCurrentSettings() {
        axios.get('/api/query-settings')
                .then(response => {
                  if (response.data.success) {
                    this.currentSettings = response.data.settings;
                  } else {
                    this.$message.error(response.data.message);
                  }
                })
                .catch(error => {
                  console.error('获取查询设置错误:', error);
                  this.$message.error('获取查询设置失败');
                });
      },
      saveSettings() {
        this.$refs.settingsForm.validate((valid) => {
          if (valid) {
            axios.post('/api/query-settings', this.settingsForm)
                    .then(response => {
                      if (response.data.success) {
                        this.$message.success('查询时间段设置成功');
                        this.getCurrentSettings();
                        this.resetForm();
                      } else {
                        this.$message.error(response.data.message);
                      }
                    })
                    .catch(error => {
                      console.error('设置查询时间错误:', error);
                      this.$message.error('设置查询时间失败');
                    });
          }
        });
      },
      resetForm() {
        this.$refs.settingsForm.resetFields();
      },
      formatDateTime(dateTimeString) {
        if (!dateTimeString) return '';
        const date = new Date(dateTimeString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      }
    }
  });
</script>
</body>
</html>